<template>
    <div class="bg">
        <img src="../../assets/img/bg.gif" alt="">
    </div>
    <div class="containerBox">
        <component :is="pageInfo.component"></component>
        <div class="toggle">
            <svg class="icon" aria-hidden="true">
                <use :xlink:href="icon"></use>
            </svg>
            <span @click="changeLogin">{{ pageInfo.toggleDes }}</span>
        </div>

    </div>
</template>

<script setup>
import commonLogin from '../../components/login/commonLogin.vue';
import smsLogin from '../../components/login/smsLogin.vue';
import { ref, watchEffect, markRaw, computed } from "vue"
let pageInfo = ref({
    loginType: 'common',
    toggleDes: "点击切换手机登录",
    component: markRaw(commonLogin)
})
let isCommonLogin = ref(true)
let changeLogin = () => {
    isCommonLogin.value = !isCommonLogin.value

}
watchEffect(() => {
    if (isCommonLogin.value) {
        pageInfo.value = {
            loginType: 'common',
            toggleDes: "点击切换手机登录",
            component: markRaw(commonLogin)
        }
    } else {
        pageInfo.value = {
            loginType: 'sms',
            toggleDes: "点击切换账号登录",
            component: markRaw(smsLogin)
        }
    }
})
let icon = computed(() => {
    return isCommonLogin.value ? '#icon-shouji-iphone12-zuhe' : '#icon-wodezhanghao'
})

</script>

<style lang="scss" scoped>
.bg {
    img {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: 864px;
    }
}

.containerBox {
    position: fixed;
    z-index: 1;
    left: 240px;
    top: 120px;
    width: 500px;
    background-color: rgba(85, 69, 75, 0.3);
    // background-color: pink;
    overflow: hidden;

    .toggle {
        float: right;
        display: flex;
        align-items: center;
        margin-right: 120px;
        overflow: hidden;
        margin-bottom: 30px;

        .icon {
            width: 2em;
            height: 2em;
        }

        span {
            cursor: pointer;
            color: white;
        }
    }
}
</style>